<script setup>
import ModalBox from '@/components/ModalBox/ModalBox.vue'
import UploadImage from "@/components/UploadImage/UploadImage.vue"
import {addBanner} from "@/apis/banner";
import { message } from 'ant-design-vue';
import { reactive, ref, toRaw, inject, watch } from 'vue';
import { Form } from 'ant-design-vue';
const useForm = Form.useForm;
const open = ref(false);
const formRef = ref();
const formState = reactive({
    id: "",
    sort:"",
    img: "",
    url: "",
    type: "",
});
const roleList = inject("getList")
const RoleTypeOptionsEnum=inject("RoleTypeOptionsEnum")
const value = ref([]);
const { resetFields, validate, validateInfos } = useForm(
    formState,
    reactive({
        type: [{ required: true, message: '请选择类型', trigger: 'blur', }],
    }),
);
// watch(open,()=>{
//     formState.name=""
//     formState.is_admin=""
//     formState.id=""
//     formState.cid=""
//     formState.type=""
// })
const onSubmit = () => {
    formRef.value
        .validate()
        .then(() => {
            craeteEdit()
        })
        .catch(error => {
            console.log('error', error);
        });
};
const handleOk = (options) => {
    validate()
        .then(res => {
            open.value = false;
            BannerOperate();
        })
        .catch(err => {
            console.log('error', err);
        });
}
const handleCancel = () => {
    open.value = false
}
const BannerOperate = async () => {
    console.log(formState);
    let res = await addBanner(formState);
    console.log(res);
    if (res.code === 200) {
        roleList();
    } else {
        message.error(res.msg);
    }
}
const uploadImg = (file) => {
    console.log("file", file);
    formState.img = file
}
const deleteFile = (options) => {
    formState.img = options
}
defineExpose({ open, formState })

</script>
<template>
    <modal-box title="新增轮播图" :isOpen="open" @ok="handleOk" @cancel="handleCancel" width="500px">
        <template #content>
            <div>
                <a-form ref="formRef" :model="formState" @finish="handleOk">
                    <a-form-item label="平台类型" v-bind="validateInfos.type">
                        <a-select v-model:value="formState.type" :allowClear="true">
                            <a-select-option v-for="item in RoleTypeOptionsEnum" :value="item.value">{{ item.label
                            }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="图片排序" v-bind="validateInfos.sort">
                        <a-input v-model:value="formState.sort" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="链接地址">
                        <a-input v-model:value="formState.url" placeholder="请输入角色字符" />
                    </a-form-item>
                    <a-form-item label="上传图片">
                        <UploadImage @upload="uploadImg" :list="formState.img" :maxNum="1" @delete="deleteFile" />
                    </a-form-item>
                </a-form>
            </div>
        </template>
    </modal-box>
</template>
<style lang='scss' scoped>
.description {
    width: 100% !important;
    margin-right: 0px !important;
}

:deep(.ant-form) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

:deep(.ant-form-item) {
    width: 100%;
    margin-right: 10px;

    // &:nth-child(2n) {
    //     margin-right: 0;
    // }
}

:deep(.ant-form-item-label) {
    width: 110px;
}
</style>